
import { title } from "process";
import { Component } from "react";
import type { ReactNode } from 'react'

/*
    子传父
    1. 在父组件中定义一个接收的方法
    2. 将接收方法传递到子组件
    3. 子组件接收父组件传递过来的方法
    4. 触发调用父组件的接收方法，且可以传递参数
    5. 使用子组件传递过来的数据
*/


class Header extends Component {

    // 3. 子组件接收父组件传递过来的方法
    props = {
        setDataFn: (val: string) => { }
    }

    render(): ReactNode {
        return <header>
            <h1>头部组件</h1>
            <button onClick={() => {
                // 4. 触发调用父组件的接收方法，且可以传递参数
                this.props.setDataFn('西瓜')
            }}>给父组件送一个西瓜</button>
        </header>
    }
}

export default class App extends Component {

    state = {
        title: '辣条'
    }

    // 1. 在父组件中定义一个接收的方法
    getData = (val: string) => {
        // 5. 使用子组件传递过来的数据
        console.log('父组件接收：' + val);
        this.setState({
            title: val
        })
    }

    render(): ReactNode {
        return <>
            <div>
                <h1>父组件 -- {this.state.title}</h1>
                <hr />
                {/* 2. 将接收方法传递到子组件 */}
                <Header setDataFn={this.getData}></Header>

            </div>
        </>
    }
}